<template>
	<view class="activity-box">

		<view class="activity-box__text">
			<view class="activity-box__text__title">{{title}}</view>
			<view class="activity-box__text__description">{{description}}</view>
		</view>
		<view class="activity-box__time">
			{{time}}
		</view>

		<!-- <u-line color="#e0e0e0" /> -->
	</view>
</template>

<script>
	export default {
		name: "articleBox",
		props: {
	
			title:String,
			description:String,
			time:String
		},
		mounted() {

		},
		data() {
			return {

			};
		},
		methods: {

		},
	};
</script>

<style lang="less">
	@import '../custom.less';

	.activity-box {
		margin-bottom: 10px;
		margin-left:  @uni-spacing-col-lg;
		margin-right:  @uni-spacing-col-lg;
		display: flex;
		
		padding:10px 20px 10px 20px ;
		box-shadow: 0px 1px 1px #c2c2c2;
		border-radius: 10px;
		&__pic{
			
		}
		&__text{
			display: flex;
			flex-direction: column;
			
			&__title {
				margin-bottom: 10px;
				font-weight: bold;

			}

			&__description {
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 1;
				/** 显示的行数 **/
				overflow: hidden;
				/** 隐藏超出的内容 **/
				font-size: small;
				color: #5e6671;
			}

		}
		&__time{
			margin-left: auto ;
			margin-right: 20px;
			font-size: small;
			color: #888888;
		}
		
	}
</style>
